<template>
	<view>
		<view class="swiper_box_item" v-for="(item, index) in list['playLists']" :key="index" @tap="jumpPlayList(item.id)">
			<view class="avatar">
				<image :src="item.coverImgUrl" mode=""></image>
			</view>
			<view class="info">
				<view>{{item.name}}</view>
				<view>{{item.nickname}}</view>
				<view>{{item.trackCount}}首，播放{{item.playCount}}万次</view>
			</view>
		</view>
		<view class="more" v-if="list.moreText" @click="more">{{list.moreText}}</view>

		<uni-load-more :status="loadStatus" v-if="showLoadMore"></uni-load-more>
	</view>
</template>

<script>
	import util from '@/utils/util.js'
	export default {
		name: "u-song-list",
		props: {
			list: {
				type: Object,
				default: {}
			},

			showLoadMore: {
				type: Boolean,
				default: false
			},

			loadStatus: {
				type: String,
				default: 'loading'
			}
		},
		
		emits: ['search', 'songHasMore'],

		data() {
			return {

			};
		},

		mounted() {
			uni.$on('songListOnReachBottom', function(keywords, offset) {
				setTimeout(() => {
					uni.$emit('search', {
						keywords: keywords,
						offset: offset,
						type: 1000
					});
				}, 500);
			});
		},
		
		methods: {
			more(){
				this.$emit('songHasMore', {currentIndex: 2});
			},
			
			jumpPlayList(id){
				util.jump('navigateTo', '/pages/list/playList?id=' + id);
			}
		}
	}
</script>

<style>
	@import url("@/static/css/iconfont.css");

	.swiper_box_item{
		background-color: #fff;
	}
	
	/deep/.uni-list-chat__content-title {
		font-size: 13px;
	}

	.swiper .swiper_box .swiper_box_item {
		display: flex;
		align-items: center;
		padding: 0 20px;
		padding-bottom: 20px;
	}

	.swiper .swiper_box .swiper_box_item .avatar {
		width: 60px;
		height: 60px;
		margin-right: 8px;
	}

	.swiper .swiper_box .swiper_box_item .avatar image {
		width: 100%;
		height: 100%;
	}

	.swiper .swiper_box .swiper_box_item .info {
		font-size: 12px;
		color: #585555;
		line-height: 2;
	}

	.swiper .swiper_box .swiper_box_item .info view:first-child {
		font-size: 13px;
		color: #000;
	}

	.more {
		font-size: 13px;
		text-align: center;
		color: #757171;
		padding: 0 0 14px 0;
	}
</style>
